<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兮问听的音乐</title>
  </head>
  <style>
    #progress-container {
        width: 300px;
        height: 10px;
        background: #ddd;
        position: relative;
    }
    #progress-bar {
        height: 100%;
        width: 0;
        background: #2196F3;
        position: absolute;
    }
    .custom-player .play {
    background-color: #4CAF50; /* 绿色 */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}
 
.custom-player .pause {
    background-color: #f44336; /* 红色 */
}
</style>
  <script>
function setVolume(volume) {
  var audio = document.getElementById("musicPlayer");
  audio.volume = volume;
}
document.addEventListener('DOMContentLoaded', function() {
    const audioPlayer = document.getElementById('musicPlayer');
    const progressContainer = document.getElementById('progress-container');
    const progressBar = document.getElementById('progress-bar');
    let isDragging = false; // 标记是否正在拖动进度条
 
    // 更新进度条函数
    function updateProgressBar() {
        const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
        progressBar.style.width = `${percent}%`;
    }
 
    // 监听播放时间更新事件
    audioPlayer.addEventListener('timeupdate', updateProgressBar);
 
    // 监听进度条点击事件，以跳转到点击位置的时间点
    progressContainer.addEventListener('click', function(e) {
        const clickPosition = e.offsetX / this.clientWidth; // 获取点击位置相对于容器的比例
        audioPlayer.currentTime = clickPosition * audioPlayer.duration; // 设置音频当前时间为点击比例对应的时长
        updateProgressBar(); // 更新进度条位置
    });
 
    // 监听拖动开始事件（可选）
    progressContainer.addEventListener('mousedown', function() {
        isDragging = true; // 开始拖动时设置标记为true
    });
    document.addEventListener('mouseup', function() {
        isDragging = false; // 结束拖动时设置标记为false
    });
    document.addEventListener('mousemove', function(e) { // 鼠标移动时更新进度条（如果正在拖动）
        if (isDragging) { // 仅在拖动时更新进度条位置，防止误触导致进度跳转
            const clickPosition = e.clientX - progressContainer.getBoundingClientRect().left; // 获取鼠标位置相对于容器的距离
            const percent = clickPosition / progressContainer.clientWidth; // 计算百分比位置
            audioPlayer.currentTime = percent * audioPlayer.duration; // 设置音频当前时间并更新进度条位置
            updateProgressBar(); // 更新进度条位置显示
        }
    });
});
document.addEventListener('DOMContentLoaded', function() {
    //try {
        /*const response = fetch("http://192.168.1.11:81/music seven/鸳鸯戏-邓寓君(等什么君).mp3");
        console.log(response);
        const arrayBuffer = response.arrayBuffer();
        const audioContext = new AudioContext();
        const audioBuffer = audioContext.decodeAudioData(arrayBuffer);
        
        const source = audioContext.createBufferSource();
        source.buffer = audioBuffer;
        source.connect(audioContext.destination);*/
        
		var audio = document.getElementById('musicPlayer');
		//const audio = new Audio("http://192.168.1.11:81/music seven/鸳鸯戏-邓寓君(等什么君).mp3");
		const playerContainer = document.getElementById('playPauseButton');
		playerContainer.addEventListener('click', function(e) {
		  if (audio.paused) {
        	 // source.start();
		       audio.play(); // 播放音频
		      this.classList.remove('play'); // 移除播放类，防止重复点击时样式混乱
		      this.classList.add('pause'); // 添加暂停类，改变按钮样式
		      this.textContent = '暂停'; // 更改按钮文本为“暂停”
		  } else {
		      audio.pause(); // 暂停音频
		      this.classList.remove('pause'); // 移除暂停类，防止重复点击时样式混乱
		      this.classList.add('play'); // 添加播放类，改变按钮样式
		      this.textContent = '播放'; // 更改按钮文本为“播放”
		  }
		});
        
    //} catch (error) {
    //    console.error('AudioContext播放失败:', error);
  //  }
});
</script>
  <body>
  <div class="custom-player">
    <audio id="musicPlayer" src="/home/www-data/0_0/音乐/music seven/鸳鸯戏-邓寓君(等什么君).mp3" controls></audio>
<br/>
    <button id="playPauseButton" class="play">播放</button>
</div>
    <br/>
<input type="range" min="0" max="1" step="0.1" value="1" oninput="setVolume(this.value)">
<br/>
<div id="progress-container">
    <div id="progress-bar"></div>
</div>
  </body>
</html>
